<template>
  <div class="category-wrapper">
    <CategoryHeader/>
    <div class="search-wrapper flex mt-[50px]" ref="searchWrap">
      <div class="search-left flex-shrink-0 bg-grey-20 w-[28%] h-full">
        <ListScroll :scrollData="categoryList">
          <ul class="nav-side">
            <li
                v-for="item in categoryList"
                :key="item.categoryId"
                class="w-full h-[56px] leading-[56px] text-center text-[14px]"
                :class="{'text-primary bg-white' : currentIndex == item.categoryId}"
                @click="selectMenu(item.categoryId)"
            >
              {{ item.categoryName }}
            </li>
          </ul>
        </ListScroll>
      </div>
      <div class="search-right flex-1 h-full">
        <ListScroll :scrollData="categoryDetailList">
          <div class="swiper-container p-[8px]">
            <div class="category-list flex flex-wrap" v-for="(products, index) in categoryDetailList" :key="index">
              <p class="text-[17px] font-medium w-full my-[10px]">{{ products.categoryName }}</p>
              <div
                  v-for="(product, index) in products.thirdLevelCategoryVOS"
                  :key="index"
                  class="w-1/3 mb-[10px] text-center  flex justify-center flex-col"
                  @click="selectProduct(product)"
              >
                <img src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" class="w-[30px] h-[30px] mx-auto"/>
                <p v-text="product.categoryName" class="my-[10px] text-[15px]"></p>
              </div>
            </div>
          </div>
        </ListScroll>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import {useWindowSize} from '@vueuse/core'
import CategoryHeader from "@/views/Category/components/CategoryHeader.vue";
import getCategoryListAPI, {type ICategoryItem, type IThirdLevelCategoryVOS} from "@/api/category/getCategoryListAPI";
import {closeToast, showLoadingToast, showToast} from "vant";
import useLoading from "@/hooks/useLoading";
import {SUCCESS_CODE} from "@/constants";
import ListScroll from "@/components/ListScroll/index.vue";
import {useRouter} from "vue-router";

const router = useRouter()
const {height} = useWindowSize()
const {isLoading, toggle} = useLoading();
const categoryList = ref<ICategoryItem[]>([]);
const currentIndex = ref(-1);
const searchWrap = ref<HTMLElement | null>(null)

const handleSearch = async () => {
  if (isLoading.value) {
    return
  }
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true
    });
    toggle(true)
    const response = await getCategoryListAPI()
    if (response.code === SUCCESS_CODE) {
      categoryList.value = response.data;
      currentIndex.value = categoryList.value[0].categoryId;
    }
  } catch (e: any) {
    showToast(e.message);
  } finally {
    toggle(false)
    closeToast();
  }
}
handleSearch();

const selectMenu = (categoryId: number) => {
  currentIndex.value = categoryId;
}
const categoryDetailList = computed(() => {
  return categoryList.value.find(item => item.categoryId === currentIndex.value)?.secondLevelCategoryVOS || [];
})
const selectProduct = (item: IThirdLevelCategoryVOS) => {
  console.log(item);
  router.push({name: 'Search', query: {categoryId: item.categoryId}})
}
onMounted(() => {
  searchWrap.value!.style.height = height.value - 100 + 'px'
})

</script>
<style scoped lang="less">

</style>